<!--#ifdef H5 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '家长好评上传',
  },
}
</route>
<!-- #endif -->

<script setup lang="ts">
import UseButton from '@/components/use-btn/index.vue'
import UseUpload from '@/components/use-upload/index.vue'
import arrowDown from '@/static/images/comment/down-icon.png'
import commentHook from '@/hooks/commentHooks'
import TagCheckBox from '@/pages/comment/components/tagCheckBox.vue'
import { CommentHistoryModel, CommentTagModel } from '@/models/commentModels'
import NotData from '@/components/NotData.vue'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'

const { tags, ...callback } = commentHook()
const parentName = ref()
const parentId = ref<number>()
const fileList = ref<string[]>([])

const paging = ref()
const listData = ref<CommentHistoryModel[]>([])

function onClickHistory(index) {}

function handleChange() {}

function jumpParent() {
  uni.navigateTo({
    url: '/pages/comment/parentListPage?isSelect=true',
  })
}

onMounted(() => {
  uni.$on('selectParent', (result) => {
    parentName.value = result.parentName
    parentId.value = result.parentId
  })
  callback.goodFeedbackTags()
  useZPaging(paging)
})

onPageScroll((e) => {
  paging.value.updatePageScrollTop(e.scrollTop)
})

onReachBottom(() => {
  paging.value.pageReachBottom()
})

onLoad((option) => {
  parentName.value = option.parentName || ''
  parentId.value = +(option.parentId || -1)
})

async function query(page: number, per_page: number) {
  const listData = await callback.goodFeedbackList(page, per_page)
  paging.value.complete(listData)
}

onUnmounted(() => {
  uni.$off('selectParent', (result) => {})
  onPageScroll(() => {})
  onReachBottom(() => {})
})

function submit() {
  console.log('submit111111')
  if (parentId.value === undefined || parentId.value === -1) {
    uni.showToast({
      title: '请选择家长',
      icon: 'none',
    })
  } else if (!fileList.value.length) {
    uni.showToast({
      title: '请选择图片',
      icon: 'none',
    })
  } else {
    const selTags = tags.value.map((tag: CommentTagModel) => {
      return tag.checkValues?.map((item: string) => {
        return item
      })
    })
    callback.submit(parentId.value, selTags.join(','), fileList.value.join(','), () => {
      fileList.value = []
      tags.value = tags.value.map((tag: CommentTagModel) => {
        tag.checkValues = []
        return tag
      })

      uni.showToast({
        title: '提交成功',
        icon: 'none',
        duration: 800,
      })

      setTimeout(() => {
        uni.navigateBack()
      }, 800)
    })
  }
}

function previewImage(images: string[]) {
  uni.previewImage({
    current: 0, // 当前显示的图片索引
    urls: images, // 图片列表
    indicator: 'number', // 显示数字指示器
    loop: true, // 循环预览
  })
}
</script>

<template>
  <view style="height: 100vh; padding: 32rpx; background: #f8f9fb">
    <view class="linear-hor round-corners" style="padding: 32rpx" @click="jumpParent">
      <wd-text :text="parentName || '请选择家长'" color="#2E2E2A" size="32rpx"></wd-text>
      <wd-img :src="arrowDown" :width="20" :height="20"></wd-img>
    </view>

    <view class="linear-vertical round-corners mt-4" style="padding: 0rpx 0">
      <view style="padding: 32rpx 32rpx 0 32rpx">
        <wd-text text="请选择好评类型" color="#2E2E2A" size="32rpx" />
      </view>
      <view
        style="width: calc(100% - 64rpx); height: 2rpx; margin: 24rpx 32rpx; background: #ebedf2"
      />
      <view v-for="(item, index) in tags" :key="index">
        <view>
          <view style="padding: 0 32rpx">
            <wd-text :text="item.category" color="#6A707C" size="28rpx" />
          </view>
          <view style="height: 24rpx" />
          <TagCheckBox v-model="item.checkValues" :list="item.subsets"></TagCheckBox>
        </view>
      </view>
    </view>

    <view class="linear-vertical round-corners mt-4 mb-4" style="padding: 32rpx">
      <view class="linear-hor" style="width: 100%">
        <wd-text text="图片上传" color="#2E2E2A" size="32rpx"></wd-text>
        <wd-text :text="`${fileList.length} /6`" color="#9FA3AA" size="28rpx"></wd-text>
      </view>
      <view class="mt-4">
        <UseUpload v-model="fileList" multiple :limit="6" @change="handleChange"></UseUpload>
      </view>
    </view>
    <UseButton content="提交" :fontSize="32" @click="submit"></UseButton>
    <view class="linear-vertical round-corners mt-4" style="padding: 32rpx">
      <wd-text text="上传历史" color="#2E2E2A" size="32rpx"></wd-text>
      <view class="scroll-views">
        <z-paging
          ref="paging"
          loading-more-no-more-text="没有更多了"
          :refresher-enabled="false"
          :use-page-scroll="true"
          v-model="listData"
          @query="query"
          :default-page-size="10"
        >
          <template #empty>
            <NotData text="暂无数据"></NotData>
          </template>
          <view class="grid">
            <view v-for="(item, index) in listData" :key="index" @click="onClickHistory(index)">
              <view class="linear-vertical">
                <span style="margin-top: 32rpx" />
                <wd-img
                  :src="item.images_slice[0]"
                  :width="150"
                  :height="150"
                  @click="previewImage(item.images_slice)"
                ></wd-img>
                <span style="margin-top: 24rpx" />
                <view style="width: 300rpx">
                  <wd-text :text="item.realname" size="28rpx" color="#2B2F36" :lines="1"></wd-text>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.round-corners {
  background: white;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.mul-item-style {
  padding: 16rpx;
  font-size: 24rpx;
  border-style: solid;
  border-width: 2rpx;
  border-radius: 8rpx;
}

.scroll-views {
  width: 100%;
  /*    height: calc(30vh - 64rpx);*/
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid-item {
  width: 80px;
  margin-top: 16rpx;
  overflow: hidden; /* 如果内容超出宽度，隐藏超出的内容 */
  text-align: center;
  text-overflow: ellipsis; /* 如果内容超出宽度，显示为省略号 */
  white-space: nowrap; /* 如果内容超出宽度，不换行 */
}
</style>
